<template>
	<view>
		<view class="cu-custom" :style="[{ height: CustomBar + 'px' }]">
			<view class="cu-bar fixed" :style="style">
				<view class="cu-custom-left" @tap="BackPage" v-if="isBack">
					<u-icon
						name="arrow-left"
						size="20px"
						color="#fff"
						v-if="isBack"
					></u-icon>
					<slot name="left"></slot>
				</view>
				
				<view class="cu-custom-left" v-else>
					<slot name="left"></slot>
				</view>

				<view class="cu-custom-content" :style="[{ top: StatusBar + 'px' }]">
					<slot name="content">{{ title }}</slot>
				</view>
				<view class="cu-custom-right"><slot name="right"></slot></view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			StatusBar: this.StatusBar,
			CustomBar: this.CustomBar
		};
	},
	name: 'cu-custom',
	computed: {
		style() {
			var StatusBar = this.StatusBar;
			var CustomBar = this.CustomBar;
			var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
			return style;
		}
	},
	props: {
		title: String,
		isBack: {
			type: [Boolean, String],
			default: true
		}
	},
	methods: {
		BackPage() {
			if (getCurrentPages().length < 2 && 'undefined' !== typeof __wxConfig) {
				let url = '/' + __wxConfig.pages[0];
				return uni.redirectTo({ url });
			}
			uni.navigateBack({
				delta: 1
			});
		}
	}
};
</script>

<style lang="scss">
.cu-custom {
	.fixed {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;
	}
	.cu-bar {
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: linear-gradient(180deg, #256bfd 0%, #60c6fd 83%);
		box-shadow: 0px 4rpx 13rpx 0px rgba(34, 23, 20, 0.1);
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #ffffff;
	}
	&-left {
		min-width: 100rpx;
		padding-left: 18rpx;
		display: flex;
		align-items: center;
	}
	&-content {
		flex: 1;
		text-align: center;
	}
	&-right {
		min-width: 100rpx;
		display: flex;
		align-items: center;
	}
}
</style>
